<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <input type="button" value="hello world" id="app"> -->
    <div id="app">
        <input type="number" v-model="add1">
        <select name="" id="" v-model="calcSel">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="x">x</option>
            <option value="/">/</option>
        </select>
        <input type="number" v-model="add2">
        <input type="button" value="=" @click="calc">
        <input type="number" v-model="result">
    </div>
    
    <div id="app2">
        <a href="#" class="btn btn-primary active" @clicl.prevent>这里是a链接</a>
        <br/>
        <button class="btn btn-info">这里是bootstrap</button>
        <br>
        <button class="btn btn-danger btn-lg btn-block">这里是bootstrap</button>
        <br>
        <input type="button" value="这里是测试bootstrap2" class="btn btn-default">
        <br>
        <p class="text-muted">这里是测试文字颜色</p>
        <p class="text-primary">这里是测试文字颜色</p>
        <p class="text-info">这里是测试文字颜色</p>
        <p class="text-danger">这里是测试文字颜色</p>
    
        <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>

        <p class="info">下面是表格bootstrap</p>


        <table class="table table-striped table-bordered table-hover">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>删除</th>
            </tr>
            <tr v-for="(item,i) in table" :key="item.id" >
                <td v-text="item.id"></td>
                <td v-text="item.name"></td>
                <td v-text="item.gender"></td>
                <td v-text="item.age"></td>
                <td ><a href="" class="" @click.prevent="delThis(item.id)">删除</a></td>
            </tr>
        </table>
    </div>


    <!-- <template id="temp-title"></template> -->
</body>
</html>